<template>
  <section class="course-section">
    <header class="course-section__header">
      <h2>{{ title }}</h2>
      <p>{{ subtitle }}</p>
    </header>
    <div class="course-playlist">
      <article
        class="playlist-card"
        v-for="item in playlists"
        :key="item.id"
        role="button"
        tabindex="0"
        @click="emit('playlist-select', item.id)"
        @keyup.enter="emit('playlist-select', item.id)"
        @keyup.space.prevent="emit('playlist-select', item.id)"
      >
        <div class="playlist-card__media">
          <img :src="item.coverImage" :alt="item.title" loading="lazy" />
        </div>
        <div class="playlist-card__body">
          <h3>{{ item.title }}</h3>
          <p>{{ item.lessonCount }} 节 · {{ item.playCountLabel }}</p>
          <div class="playlist-card__meta">
            <span>{{ item.priceLabel }}</span>
            <span class="playlist-card__tag" v-if="item.promoTag">{{ item.promoTag }}</span>
          </div>
        </div>
      </article>
    </div>
  </section>
</template>

<script setup lang="ts">
import { toRefs } from 'vue'
import type { CoursePlaylistItem } from '../../types/course/Course.ts'

defineOptions({
  name: 'CoursePlaylistSection',
})

const emit = defineEmits<{
  (e: 'playlist-select', playlistId: string): void
}>()

const props = defineProps<{
  title: string
  subtitle: string
  playlists: CoursePlaylistItem[]
}>()

const { title, subtitle, playlists } = toRefs(props)
</script>

<style scoped>
.course-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.course-section__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.course-section__header h2 {
  font-size: 28px;
  font-weight: 700;
}

.course-section__header p {
  font-size: 16px;
  color: #6b7280;
}

.course-playlist {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.playlist-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 255, 0.98));
  box-shadow: 0 16px 32px rgba(79, 70, 229, 0.08);
  overflow: hidden;
  transition: transform 0.2s ease;
  cursor: pointer;
  outline: none;
}

.playlist-card:hover {
  transform: translateY(-4px);
}

.playlist-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}

.playlist-card__media img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.playlist-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.playlist-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.playlist-card__tag {
  color: #3c65f5;
}
</style>
